<script setup>
import { ref, onMounted } from 'vue';
import { get } from '../util/request.js';
import { useRoute } from 'vue-router';

const route = useRoute();
const logs = ref([]);
const type = ref(route.query.type);

const back = () => {
  history.back();
}

onMounted(() => {
  fetchLogs();
});


const fetchLogs = () => {
  let endpoint = type.value == 1 ? 'pay/payLogs' : 'user/wallet/rechargeLogs';// 1为支付宝充值记录，2为消费记录

  get(endpoint).then(response => {
    if (response.code === 0) {
      logs.value = response.data;
    } else {
      // handle error
      console.error('Failed to fetch logs');
    }
  }).catch(error => {
    // handle error
    console.error('Error fetching logs:', error);
  });
};

</script>

<template>
  <van-nav-bar
      title="记录详情"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="back"
  />

  <van-list>
    <van-cell v-for="(log, index) in logs" :key="index">
      <template #title>
        <div v-if="type == 2">{{ log.info }}</div>
        <div v-else>{{ log.title }}</div>
      </template>
      <template #label>
        <div v-if="type == 1">

          <div>金额: {{ log.money/100 }}</div>
          <div>充值详情: {{ log.title }}</div>
          <div>充值时间: {{ log.ctime }}</div>
        </div>
        <div v-else-if="type == 2">
          <div>花费金额：{{log.money+"RMB"}}</div>
          <div>订单号: {{ log.no }}</div>
          <div>购买时间: {{ log.ctime }}</div>
        </div>
        <div v-else>
          <div>ID号: {{ log.id }}</div>
        </div>
      </template>

    </van-cell>
  </van-list>
</template>

<style scoped>
.van-cell {
  margin-bottom: 10px;
}

 .no-coupon {
   text-align: center;
   padding: 20px;
   font-size: 16px;
 }
</style>
